<template>
  <div>
    <div class="slide_item">
      <div class="label">章节模板</div>
      <span>
                <span>模板：</span>
                <select class="select" v-model="defaultBackground">
                    <option v-if="item.sffm=='True'" v-for="item in styles" :key="item.id" :label="item.styleName"
                            :value="item.id"></option>
                </select>
            </span>
      <!-- <span>
  <span>版式：</span>
  <select class="select" v-model="defaultTemplate">
    <option v-for="item in template(defaultBackground)" :key="item.id" :label="item.templateName" :value="item.id"></option>
  </select>
</span> -->
    </div>
  </div>

</template>
<script>
  // import { remote } from 'electron'
  import { mapState, mapActions } from 'vuex'
  import { action } from '../../common/quantity'

  export default {
    name: 'PrePlanConfig',
    data: () => {
      return {}
    },
    computed: {
      ...mapState({
        styles: state => state.slideEditor.styles
      }),
      defaultBackground: {
        get () {
          return this.$store.state.preplan.defaultChapterTemplate
        },
        set (value) {
          this.SetChapterTemplate(value)
        }
      }
    },
    methods: {
      ...mapActions({
        SetChapterTemplate: action.preplan.SetChapterTemplate
      })
    }
  }
</script>
<style scoped>
  .slide_item {
    width: calc(100% - 60px);
    margin: 10px auto 0;
    padding-bottom: 8px;
    border: 1px solid #cccccc;
    border-radius: 10px;
    position: relative;
    font-size: 0;
  }

  .slide_item .label {
    position: absolute;
    background-color: white;
    top: 0;
    left: 20px;
    font-size: 12px !important;
    transform: translateY(-50%);
  }

  .slide_item > span {
    display: inline-block;
    margin-top: 16px;
    width: 50%;
    font-size: 14px;
  }

  .slide_item > span > span {
    position: static;
    vertical-align: baseline;
    margin-left: 10px;
    margin-top: 2px;
    display: inline-block;
  }

  .slide_item .select {
    width: calc(100% - 70px);
  }

  .slide_item .input {
    width: calc(100% - 70px);
  }

  .slide_item .row {
    width: 100%;
    margin-left: 10px;
  }

  .slide_item .row .input {
    width: calc(100% - 280px);
  }

  .slide_item input,
  .slide_item select {
    height: 25px;
    font-size: 14px;
    padding: 1px 10px;
  }

  select,
  input {
    border: 1px solid #66afe9;
    outline: none;
    border-radius: 3px;
    padding: 3px 10px;
    height: 30px;
    width: 200px;
    font-size: 18px;
  }

  button {
    border: 1px solid #66afe9;
    outline: none;
    border-radius: 3px;
    padding: 0;
    height: 25px;
    width: 30px;
    margin-left: -5px;
  }
</style>

